import React, { Component } from 'react';
import style from './chartaccess.module.css';
import {
  G2,
  Chart,
  Geom,
  Axis,
  Tooltip,
  Coord,
  Label,
  Legend,
  View,
  Guide,
  Shape,
  Facet,
  Util
} from "bizcharts";
class CAccess extends Component {
  constructor(props) {
    super(props);
    this.state = {  }
  }

  

  render() { 
    const data = [
      {
          month: "0点",
          city: "PV",
          temperature: 17
      },
      {
          month: "0点",
          city: "UV",
          temperature: 20.9
      },
      {
          month: "1点",
          city: "PV",
          temperature: 16.9
      },
      {
          month: "1点",
          city: "UV",
          temperature: 4.2
      },
      {
          month: "2点",
          city: "PV",
          temperature: 9.5
      },
      {
          month: "2点",
          city: "UV",
          temperature: 15.7
      },
      {
          month: "3点",
          city: "PV",
          temperature: 14.5
      },
      {
          month: "3点",
          city: "UV",
          temperature: 8.5
      },
      {
          month: "4点",
          city: "PV",
          temperature: 18.4
      },
      {
          month: "4点",
          city: "UV",
          temperature: 11.9
      },
      {
          month: "5点",
          city: "PV",
          temperature: 21.5
      },
      {
          month: "5点",
          city: "UV",
          temperature: 15.2
      },
      {
          month: "6点",
          city: "PV",
          temperature: 25.2
      },
      {
          month: "6点",
          city: "UV",
          temperature: 17
      },
      {
          month: "7点",
          city: "PV",
          temperature: 26.5
      },
      {
        month: "7点",
        city: "UV",
        temperature: 16.6
      },
      {
        month: "8点",
        city: "PV",
        temperature: 26.5
      },
      {
        month: "8点",
        city: "UV",
        temperature: 16.6
      },
      {
        month: "9点",
        city: "PV",
        temperature: 26.5
      },
      {
        month: "9点",
        city: "UV",
        temperature: 16.6
      },
      {
        month: "10点",
        city: "PV",
        temperature: 66.5
      },
      {
        month: "10点",
        city: "UV",
        temperature: 16.6
      },
      {
        month: "11点",
        city: "PV",
        temperature: 26.5
      },
      {
        month: "11点",
        city: "UV",
        temperature: 16.6
      },
      {
        month: "12点",
        city: "PV",
        temperature: 50
      },
      {
        month: "12点",
        city: "UV",
        temperature: 31.6
      },
      {
        month: "13点",
        city: "PV",
        temperature: 12.5
      },
      {
        month: "13点",
        city: "UV",
        temperature: 26.6
      },
    ];
    const cols = {
      month: {
        range: [0, 1]
      }
    };
    return (
      <div className={style.chart}>
        <div className={style.chart_header}>
          <div className={style.chart_header_title}>
            <span>访问情况</span>
            <p>Access situation</p>
          </div>
          <div className={style.chart_header_doit}>
            <a href="">详细报告</a>
            <a href="">导出</a>
          </div>
        </div>
        <div className={style.chart_div}>
          <Chart height={400} data={data} scale={cols} forceFit>
            <Legend />
            <Axis name="month" />
            <Axis
              name="temperature"
              label={{
                formatter: val => `${val}人`
              }}
            />
            <Tooltip
              crosshairs={{
                type: "y"
              }}
            />
            <Geom
              type="line"
              position="month*temperature"
              size={2}
              color={"city"}
              shape={"smooth"}
            />
            <Geom
              type="point"
              position="month*temperature"
              size={4}
              color={"city"}
              style={{
                stroke: "#fff",
                lineWidth: 1
              }}
            />
          </Chart>
        </div>
      </div>
    );
  }
}
 
export default CAccess;